'use client'

import {useState} from 'react'
import {Card, Col, DatePicker, Row, Table} from 'antd'

const { RangePicker } = DatePicker

export default function ReportsPage() {
  const [dateRange, setDateRange] = useState<[string, string]>(['2024-01-01', '2024-03-01'])

  // 销售趋势数据
  const salesColumns = [
    { title: '日期', dataIndex: 'date', key: 'date' },
    { title: '销售额', dataIndex: 'value', key: 'value', render: (value: number) => `￥${value.toLocaleString()}` },
  ]

  const salesData = [
    { key: '1', date: '2024-01-01', value: 3500 },
    { key: '2', date: '2024-01-15', value: 4200 },
    { key: '3', date: '2024-02-01', value: 3800 },
    { key: '4', date: '2024-02-15', value: 4500 },
    { key: '5', date: '2024-03-01', value: 5000 },
  ]

  // 库存统计数据
  const inventoryColumns = [
    { title: '产品', dataIndex: 'category', key: 'category' },
    { title: '库存数量', dataIndex: 'value', key: 'value' },
  ]

  const inventoryData = [
    { key: '1', category: 'iPhone 15', value: 120 },
    { key: '2', category: 'iPhone 15 Pro', value: 85 },
    { key: '3', category: 'iPhone 15 Pro Max', value: 64 },
    { key: '4', category: '华为 Mate 60', value: 95 },
    { key: '5', category: '华为 Mate 60 Pro', value: 78 },
  ]

  // 采购统计数据
  const purchaseColumns = [
    { title: '供应商', dataIndex: 'supplier', key: 'supplier' },
    { title: '采购金额', dataIndex: 'amount', key: 'amount' },
    { title: '采购次数', dataIndex: 'count', key: 'count' },
    { title: '平均单价', dataIndex: 'avgPrice', key: 'avgPrice' },
  ]

  const purchaseData = [
    {
      key: '1',
      supplier: '苹果公司',
      amount: '￥1,200,000',
      count: 3,
      avgPrice: '￥400,000',
    },
    {
      key: '2',
      supplier: '华为技术有限公司',
      amount: '￥980,000',
      count: 2,
      avgPrice: '￥490,000',
    },
  ]

  return (
    <div style={{ padding: '24px' }}>
      <Row gutter={[16, 16]}>
        <Col span={24}>
          <Card
            title="时间范围"
            extra={
              <RangePicker
                value={[dateRange[0], dateRange[1]].map((date) => new Date(date)) as any}
                onChange={(dates) => {
                  if (dates) {
                    setDateRange([
                      dates[0]?.toISOString().split('T')[0] || '',
                      dates[1]?.toISOString().split('T')[0] || '',
                    ])
                  }
                }}
              />
            }
          >
            <Row gutter={[16, 16]}>
              <Col span={8}>
                <Card>
                  <div>总销售额</div>
                  <h2>￥2,180,000</h2>
                  <div>较上期增长 12%</div>
                </Card>
              </Col>
              <Col span={8}>
                <Card>
                  <div>总采购额</div>
                  <h2>￥2,180,000</h2>
                  <div>较上期增长 8%</div>
                </Card>
              </Col>
              <Col span={8}>
                <Card>
                  <div>库存总值</div>
                  <h2>￥3,560,000</h2>
                  <div>较上期增长 5%</div>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>

        <Col span={24}>
          <Card title="销售趋势">
            <Table
              columns={salesColumns}
              dataSource={salesData}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>

        <Col span={12}>
          <Card title="库存统计">
            <Table
              columns={inventoryColumns}
              dataSource={inventoryData}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>

        <Col span={12}>
          <Card title="采购统计">
            <Table
              columns={purchaseColumns}
              dataSource={purchaseData}
              pagination={false}
              size="small"
            />
          </Card>
        </Col>
      </Row>
    </div>
  )
} 